<template>
  <comcard>
    <div slot="title_name">个人中心</div>
    <div slot="body_name">
      <el-form
        :model="user"
        label-width="100px"
        :rules="checkuser"
        ref="userForm"
      >
        <el-form-item label="账号" prop="account">
          <el-row>
            <el-col :span="6">
              <el-input type="text" v-model="user.account"></el-input
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-row>
            <el-col :span="6"
              ><el-input type="password" v-model="user.password"></el-input
            ></el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-select placeholder="请选择" v-model="user.userGroup">
            <el-option label="普通用户" value="普通用户"> </el-option>
            <el-option label="超级管理员" value="超级管理员"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="save">添加</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </comcard>
</template>

<script>
import comcard from "../../components/comcard/index.vue";
import { api_save } from "../../api/users.js";
export default {
  components: {
    comcard,
  },
  data() {
    return {
      user: {
        account: "",
        password: "",
        userGroup: "普通用户",
      },

      checkuser: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "账号最小单位为3最大单位为12",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "密码最小单位为3最大单位为12",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    save() {
      this.$refs.userForm.validate(async (b) => {
        if (b) {
          let rst = await api_save(this.user);
          console.log(rst);
          let { code, msg } = rst;
          if (code == 0) {
            this.$router.push("/users/list");
          }
        } else {
          console.log(b + "不通过");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>